<template>
  <div id="introduce-app7">
    <TodoItem
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></TodoItem>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import TodoItem from "@/components/01-介绍/TodoItem.vue";

@Component({
  components: { TodoItem },
})
export default class IntroduceApp7 extends Vue {
  // region Prop
  // endregion
  // region Data
  groceryList = [
    { id: 0, text: "蔬菜" },
    { id: 1, text: "奶酪" },
    { id: 2, text: "随便其它什么人吃的东西" },
  ];
  // endregion
  // region computed
  // endregion
  // region watch
  // endregion
  // region method
  reverseMessage() {
    this.message = this.message.split("").reverse().join("");
  }
  // endregion
  // region hook
  /**
   * 这里是为了绑定到 window 全局增加的额外内容
   */
  created() {
    window.IntroduceApp7 = this;
  }
  // endregion
}
</script>

<style lang="css">
#introduce-app7 {
  border: 1px solid red;
}
</style>
